<template>
    <view class="page-body">
        <!-- 页面内容开始 -->

        <!-- 表格搜索组件开始 -->
        <vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns" size="mini"
            @search="search"></vk-data-table-query>
        <!-- 表格搜索组件结束 -->

        <!-- 自定义按钮区域开始 -->
        <view>
            <el-row>

            </el-row>
        </view>
        <!-- 自定义按钮区域结束 -->

        <!-- 表格组件开始 -->
        <vk-data-table ref="table1" :rowNo="true" :border="true" :action="table1.action" :columns="table1.columns"
            :query-form-param="queryForm1" :custom-right-btns="table1.customRightBtns" size="mini"
            @current-change="currentChange"></vk-data-table>
        <!-- 表格组件结束 -->
        <vk-data-dialog v-model="detailshow" title="样品查询" width="1150px" mode="form" :close-on-click-modal="true"
            style="padding: 20px;">
                <vk-data-table ref="table2" :rowNo="true" :border="true" :action="table2.action" size="mini" 
                    :columns="table2.columns" style="margin: 20px;" :pagination="true" :auto-action="false"
                    :query-form-param="queryForm2" @current-change="currentChange"></vk-data-table>
        </vk-data-dialog>
        <!-- 页面内容结束 -->
    </view>
</template>

<script>
var that;													// 当前页面对象
var vk = uni.vk;									// vk实例
var originalForms = {};						// 表单初始化数据

export default {
    data() {
        // 页面数据变量
        return {
            // 页面是否请求中或加载中
            loading: false,
            detailshow:false,
            // init请求返回的数据
            data: {

            },
            // 表格相关开始 -----------------------------------------------------------
            table1: {
                // 表格数据请求地址
                action: "admin/testing/comprehensive-query/sys/groupquery",
                // 表格字段显示规则
                columns: [
                    // { key:"_id", title:"id", type:"text", width:220 },

                    { key: "samplename", title: "检测项目", type: "text", width: 500 },
                    { key: "count", title: "检测数量", type: "number", width: 200 },
                ],
                // 多选框选中的值
                multipleSelection: [],
                // 当前高亮的记录
                selectItem: "",
                customRightBtns: [
                    {
                        title: '查询', type: 'primary',

                        onClick: (item) => {
                            that.detailshow = true;
                            // that.queryForm2.formData.
                            that.$nextTick(async () => { 
                                that.queryForm2.formData = {
                                    detection_category: item.samplename,
                                    ...that.queryForm1.formData
                                }
                                that.$refs.table2.search();
                            })
                          
                        }
                    }],
            },
            table2: {
                // 表格数据请求地址
                action: "admin/testing/comprehensive-query/sys/groupquery_detail",
                // 表格字段显示规则
                columns: [
                    // { key:"_id", title:"id", type:"text", width:220 },

                    
                    { key: "sampleno", title: "no.", type: "text", width: 100 },
                    { key: "detection_category", title: "检测项目名称", type: "text", width: 180 },
                    
                    { key: "detection_form.client_name", title: "送检单位", type: "text", width: 250 },
                    { key: "samplename", title: "样品名称", type: "text", width: 150 },
                    { key: "unit", title: "单位", type: "text", width: 150 },
                    { key: "client_info.cate_price.price", title: "价格", type: "text", width: 80 },
                    { key: "_add_time", title: "录入时间", type: "time", width: 160, valueFormat: "MM月dd日 " , width: 80 },
                ],
                // 多选框选中的值
                multipleSelection: [],
                // 当前高亮的记录
                selectItem: "",

            },
            // 表格相关结束 -----------------------------------------------------------
            // 表单相关开始 -----------------------------------------------------------
            // 查询表单请求数据
            queryForm1: {
                // 查询表单数据源，可在此设置默认值
                formData: {

                },
                // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
                columns: [
                    {
                        key: "client", title: "委托单位/人", type: "remote-select", placeholder: "请选择委托单位/人",
                        filterable: true,
                        action: "admin/base/client/sys/getalllist",
                        props: { list: "rows", value: "_id", label: "name" },

                        showAll: true,
                        actionData: {
                            pageSize: -1
                        },
                        width: 200
                    },
                    { key: "_add_time", title: "填单时间", type: "datetimerange", width: 380, mode: "[]" },

                ]
            },
            queryForm2: {
                // 查询表单数据源，可在此设置默认值
                formData: {

                },
                // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
                columns: [
                    { key: "detection_category", title: "项目名称", type: "datetimerange", width: 380, mode: "=" },
                    { key: "_add_time", title: "填单时间", type: "datetimerange", width: 380, mode: "[]" },

                ]
            },
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {

                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "",
                    // 表单字段显示规则
                    columns: [

                        { key: "samplename", title: "商品名称", type: "text", placeholder: "请输入商品规格名称", width: 300 },
                        { key: "count", title: "数量", type: "number", placeholder: "请输入排序权重", width: 200 },
                        // {
                        // 	key: "is_on", title: "是否启用", width: 80, type: "switch", width: 120, activeValue: true, inactiveValue: false,
                        // }
                    ],
                    // 表单验证规则
                    rules: {
                        name: [
                            // 必填
                            { required: true, message: "商品规格名称不能为空", trigger: ['blur', 'change'] }
                        ],
                        // sort: [
                        // 	// 必填
                        // 	{ required: true, message: "排序不能为空", trigger: ['blur', 'change'] }
                        // ],
                    },
                    // add 代表添加 update 代表修改
                    formType: "",
                    // 是否显示表单的弹窗
                    show: false
                }
            },
            // 其他弹窗表单
            formDatas: {},
            // 表单相关结束 -----------------------------------------------------------
        };
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
        that = this;
        vk = that.vk;
        that.options = options;
        that.init(options);
    },
    onUnload() {
        // 返回false阻止页面被销毁
        return false;
    },
    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
    onReady() { },
    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
    onShow() { },
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() { },
    // 函数
    methods: {
        // 页面数据初始化函数
        init(options) {
            originalForms["form1"] = vk.pubfn.copyObject(that.form1);
        },
        // 页面跳转
        pageTo(path) {
            vk.navigateTo(path);
        },
        // 表单重置
        resetForm() {
            vk.pubfn.resetForm(originalForms, that);
        },
        // 搜索
        search() {
            that.$refs.table1.search();
        },
        // 刷新
        refresh() {
            that.$refs.table1.refresh();
        },
        // 获取当前选中的行的数据
        getCurrentRow() {
            return that.$refs.table1.getCurrentRow();
        },
        // 监听 - 行的选中高亮事件
        currentChange(val) {
            that.table1.selectItem = val;
        },
        // 当选择项发生变化时会触发该事件
        selectionChange(list) {
            that.table1.multipleSelection = list;
        },


    },
    // 监听属性
    watch: {

    },
    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {

    }
};
</script>

<style lang="scss" scoped>
.page-body {}
</style>
